<template>
    <view class='page'>
        <view>
            <view class="top">
                <u-navbar :title="!isLogin ? '蔚蓝至善优选' : ''" :title-color="'#ffffff'" :is-back="false"
                    :background="background" :border-bottom="false">
                    <view v-if="isLogin" class="slot-wrap" @click="searchClick">
                        <u-search v-model="inputValue" :show-action="showAction" height="56"
                            :action-style="{color: '#fff'}"></u-search>
                        <!-- @search="search" @blur="blur" @clear="clear" @change="input" -->
                    </view>
                </u-navbar>
            </view>
            <view class="service service1 box">
                <image v-if="!isLogin" :src="$imgUrl+'index/service.png'" mode="widthFix"></image>
                <view class="uni-margin-wrap" v-if="isLogin">
                    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item v-for="item,index in bannerList" :key="index">
                            <view class="swiper-item" @click="toDetail(item)">
                                <image :src="item.url" mode="widthFix"></image>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <view class="box box1" v-if="classList.length>0">
                <view class="txt">
                    <image :src="$imgUrl+'index/star.png'" mode="widthFix"></image>
                    <text>康养好物推荐</text>
                    <image :src="$imgUrl+'index/star.png'" mode="widthFix"></image>
                </view>
                <view class="fenlei">
                    <view class="item" v-for="item,index in classList" :key="index" @click="toPage(item.id)">
                        <view class="pic">
                            <image v-if="item.cover" :src="item.cover" mode="widthFix"></image>
                        </view>
                        <text class="one-omit">{{item.name}}</text>
                    </view>
                </view>
            </view>
            <view class="banner-view" style="margin: 30rpx 30rpx -30rpx 30rpx;" v-if="isLogin && banner.length > 0">
               <!-- <image style="width: 100%;" src="https://betayl.weilankangyang.com/upload/48/555d48c6b773c5f3b68a8be2096eff.png" mode="widthFix"></image> -->
                <view class="uni-margin-wrap" >
                    <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item v-for="item,i in banner" :key="i">
                            <view class="swiper-item" @click="toDetail0(item)">
                                <image :src="item.picture" mode="widthFix"></image>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <view class="service kh box" >
                <image v-if="!isLogin" :src="$imgUrl+'index/kh.jpg'" mode="widthFix"></image>
                <image v-else :src="middleBanner" mode="widthFix" style="border-radius:8rpx;"></image>
            </view>
            <view v-if="!isLogin" class="service box" @click="toLogin()">
                <image :src="$imgUrl+'index/red.png'" mode="widthFix"></image>
            </view>
            <!-- 提示框 -->
            <u-modal v-model="show" show-cancel-button :content="content" @confirm="confirm"></u-modal>
            <template v-if="isLogin">
                <view>
                    <!-- <view style="background: #ffffff; padding: 30rpx; font-size:32rpx;">大家都在看</view> -->
                    <view style="background: #ffffff;">
                        <CommodityList :dataList='dataList'></CommodityList>
                    </view>
                </view>
                <view class="u-load-more-wrap">
                    <u-line color="#d4d4d4" length="50"></u-line>
                    <view class="u-load-more-inner"><view class="u-line-1">没有更多了</view></view>
                    <u-line color="#d4d4d4" length="50"></u-line>
                </view>
                <view style="height:60rpx;"></view>
            </template>
        </view>
        <TabBar :current="0" v-if="isLogin"></TabBar>
        <TabBar :current="0" v-else></TabBar>
        <u-back-top :scroll-top="PageScrollTop" top="1000"></u-back-top>
        <!-- <TabBar :current="0"></TabBar> -->
    </view>
</template>
<script>
    import {
        getGoodsListsToHome,
        getSceneLists
    } from '@/api/mall.js'
    import {
        getHomes,
    } from '@/api/index.js'
    import {
        getCityList,
    } from "@/api/movie.js"
    const QQMapWX = require('@/utils/tools/qqmap-wx-jssdk.min.js')
    var qqmapsdk = new QQMapWX({
        key: 'XX4BZ-INFW4-PZNU7-KKMEQ-HMEYE-AXBQT'
    });
    import CommodityList from '@/components/common/CommodityList.vue'
    export default {
        components: {
            CommodityList,
        },
        data() {
            return {
                appName: '',
                $imgUrl: this.$imgUrl,
                flowList: [],
                dataList: [],
                show: false,
                content: "是否要前往登录页?",
                isLogin: false,
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #37988d)'
                },
                inputValue: '',
                classList: [],
                bannerList: [],
                huanxin: {},
                queryParams: {
                    page: 1,
                    limit: 20,
                },
                cityList: [],
                cityInfo: {
                    city: '',
                },
                isShow: false,
                pageCount: '',
                middleBanner:'',
                PageScrollTop: 0,
                banner:[
                    {
                    url:'https://betayl.weilankangyang.com/upload/48/555d48c6b773c5f3b68a8be2096eff.png'
                   },
                   {
                    url:'https://betayl.weilankangyang.com/upload/78/e6e67da820e4bc9ced0e28608b03ca.png'
                   }
                ],
            };
        },
        onLoad(options) {},
        onShow() {
            this.isLogin = uni.getStorageSync("token") ? true : false
            if (this.isLogin) {
                let fun = [
                    getHomes({}),
                    getSceneLists({})
                ]
                Promise.all(fun).then(res => {
                    console.log(res[0].data, "res[0].data")
                    this.classList = res[0].data.goods_cates
                    this.banner = res[0].data.scene_lists
                    // this.classList = res[1].data
                    this.bannerList = res[0].data.top_banner.info
                    this.middleBanner = res[0].data.center_banner.info[0].url
                    this.queryParams.page = 1
                    this.getList();
                    this.huanxin = uni.getStorageSync("huanxin") ? JSON.parse(uni.getStorageSync("huanxin")) :
                        {}
                    if (this.huanxin && this.huanxin.length > 0) {
                        this.loginHx()
                    }
                })
            } else {
                // #ifdef MP-WEIXIN
                this.getAuthor()
                // #endif
            }
        },
        //触底加载
        onReachBottom() {
            console.log(12333);
            let that = this
            that.queryParams.page = that.queryParams.page + 1
            if (that.queryParams.page > that.pageCount) return;
            let params = {
                page: that.queryParams.page,
                limit: that.queryParams.limit,
            }
            getGoodsListsToHome(params).then((res) => {
                console.log(res, "ressss")
                for (let i = 0; i < res.data.lists.length; i++) {
                    that.dataList.push(res.data.lists[i])
                }
                // that.queryParams.page = res.page
                // that.queryParams.pageCount = res.pageCount
                console.log(that.dataList, '9999')
            })
        },
        onPageScroll(e) {
            this.PageScrollTop = e.scrollTop;
        },
        methods: {
            // <<----蔚蓝至善优选方法start ---->>
            getAuthor() {
                const that = this
                wx.getSetting({
                    success: (res) => {
                        if (!res.authSetting['scope.userLocation']) {
                            console.log(1234)
                            wx.authorize({
                                scope: 'scope.userLocation',
                                success: (ress) => {
                                    // that.toLogin()
                                }
                            })
                        }
                    }
                })
            },
            loginHx() {
                uni.WebIM.conn.open({
                    user: this.huanxin.username,
                    pwd: this.huanxin.password,
                    appkey: uni.WebIM.config.appkey,
                })
                console.log(">>>>>登录环信", uni.WebIM)
                uni.setStorage({
                    key: "myUsername",
                    data: this.huanxin.username,
                })
                console.log(uni.getStorageSync("myUsername"), 999)
                // uni.WebIM.conn.open({
                //     user: "test1",
                //     pwd: "test1",
                //     appkey: uni.WebIM.config.appkey,
                // this.huanxin.appkey
                // })
                // console.log(">>>>>登录环信", uni.WebIM)
                // uni.setStorage({
                //     key: "myUsername",
                //     data: "test1",
                // })
            },
            getList() {
                getGoodsListsToHome(this.queryParams).then(res => {
                    this.dataList = res.data.lists;
                    this.pageCount = res.data.pageCount
                })
            },
            toLogin() {
                this.show = true
            },
            confirm() {
                this.show = false
                // #ifdef MP
                uni.reLaunch({
                    url: '/pagesA/login/wxLogin'
                })
                // #endif
                // #ifdef APP-PLUS || H5
                uni.navigateTo({
                    url: "/pagesA/login/index"
                });
                // #endif
            },
            input(res) {
                // console.log('----input:', res)
            },
            clear(res) {

            },
            blur(res) {

            },
            searchClick() {
                this.judgeLogin(() => {
                    uni.navigateTo({
                        url: '/pages/search/search',
                        params: {
                            searchValue: this.inputValue
                        }
                    })
                });
            },
            toPage(id) {
                // this.$name = id 
                uni.setStorageSync('id', id);
                uni.switchTab({
                    url: '/pages/mall/index',

                })
                // this.judgeLogin(() => {
                //     uni.navigateTo({
                //         url:'/pagesB/scenarioization/scenarioization?code=' + item.code + "&title=" + item.title
                //         // url: '/pagesB/scenarioization/scenarioization?item=' + encodeURIComponent(JSON
                //         //     .stringify(item))
                //     })
                // })
            },
            toDetail0(item){
                uni.navigateTo({
                        url:'/pagesB/scenarioization/scenarioization?code=' + item.code + "&title=" + item.title
                        // url: '/pagesB/scenarioization/scenarioization?item=' + encodeURIComponent(JSON
                        //     .stringify(item))
                    })
            },
            toDetail(row) {
                if (row.jump_type == 1) {
                    //外链
                    uni.navigateTo({
                        url: '/pagesA/login/tool?link=' + encodeURIComponent(row.jump_target)
                    })
                } else if (row.jump_type == 2) {
                    //商品详情
                    uni.navigateTo({
                        url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(row.jump_target) +
                            "&invite=" + uni.getStorageSync(
                                "invite_code") || ''
                    })
                } else if (row.jump_type == 3) {
                    //服务详情
                    uni.navigateTo({
                        url: '/pagesA/service/detail?id=' + row.jump_target
                    })
                }
            },
            // <<----蔚蓝至善优选方法end ---->>

            toCinema() {
                uni.navigateTo({
                    url: '/pagesB/movie/index'
                })
            },
            getShow() {
                this.$refs.popupRef.show()
            },
            getCity() {
                uni.getLocation({
                    type: 'wgs84',
                    geocode: true,
                    success: (res) => {
                        console.log(res, "res123")
                        uni.setStorageSync('latitude', res.latitude);
                        uni.setStorageSync('longitude', res.longitude);
                        this.getCityNmae(res.latitude, res.longitude)
                    },
                });
            },
            getCityNmae(latitude, longitude) {
                qqmapsdk.reverseGeocoder({
                    location: {
                        latitude,
                        longitude
                    },
                    success: (res) => {
                        this.cityInfo.city = res.result.address_component.city
                        // let cityId = this.cityList.find(item => item.regionName.includes(res.result
                        //     .address_component.city.slice(0, 2))).cityId
                        // this.cityInfo.cityId = cityId
                        // uni.setStorageSync('cityId', cityId);
                        // let citName = this.cityList.find(item => item.cityId == cityId).regionName
                        // uni.setStorageSync('citName', citName);
                    },
                    fail(res) {
                        console.log(res, '报错了')
                    },
                })
            },
            back_city(e) {
                console.log(e, "eeeee")
                if (e) {
                    if (e.regionName) {
                        this.$set(this.cityInfo, "city", e.regionName)
                    } else {
                        this.$set(this.cityInfo, "city", e)
                    }
                }
                this.$refs.popupRef.close();
            },

            toService() {
                uni.navigateTo({
                    url: "/pagesA/service/detail?id=" + 44
                })
            }
        },
    };
</script>
<style scoped lang='scss'>
    .page {
        background-color: #fff;

        .top {
            position: relative;
            width: 100%;
            height: 320rpx;
            background: linear-gradient(to top right, #32997d, #3f99ad);
            border-radius: 0% 0% 15% 15%;
            overflow: hidden;

            .slot-wrap {
                display: flex;
                align-items: center;
                flex: 1;

                u-search {
                    width: 90%;
                    margin: 0 auto;
                }
            }
        }

        .service {
            margin: 20rpx auto;

            image {
                width: 100%;
            }
        }

        .service1 {
            margin-top: -140rpx;
            border-radius: 10rpx;

            .uni-margin-wrap {
                swiper {
                    width: 694rpx !important;
                    height: 250rpx !important;
                    overflow: hidden;
                    border-radius: 10rpx;

                    image {
                        width: 100%;
                        border-radius: 18rpx;
                    }
                }
            }
        }
        
        .banner-view {
            /* margin-top: -140rpx; */
            border-radius: 10rpx;
        
            .uni-margin-wrap {
                swiper {
                    width: 694rpx !important;
                    height: 420rpx !important;
                    overflow: hidden;
                    border-radius: 10rpx;
        
                    image {
                        width: 100%;
                        border-radius: 18rpx;
                    }
                }
            }
        }

        .top-region {
            display: flex;
            align-items: center;

            text {
                color: #ffffff;
                font-size: 28rpx;
                padding: 0 6rpx;
            }
        }

        .topMovie {
            position: relative;
            width: 100%;
            /* height: 235rpx; */
            background: linear-gradient(to top right, #32997d, #37988d);
            /* border-radius: 0% 0% 15% 15%; */
            overflow: hidden;

            .slot-wrap0 {
                display: flex;
                align-items: center;
                flex: 1;
                padding-left: 30rpx;

                u-search {
                    /* width: 85%; */
                    margin: 0 auto;
                }
            }

            .topRound {
                margin-top: 20rpx;
                background: #fff;
                width: 100%;
                height: 30rpx;
                border-radius: 50rpx 50rpx 0 0;
            }
        }

        .bannerS {
            padding-top: 10rpx;
            border-radius: 15% 15% 0% 0%;
            background: #ffffff;
            width: 100%;
            height: 230rpx;
            overflow: hidden;

            .picture {
                border-radius: 15% 15% 0% 0%;
                background: #ffffff;
                z-index: 9999;
                display: flex;
                width: 100%;
                justify-content: center;
                /* padding-top: 40rpx; */

                .uni-margin-wrap {
                    swiper {
                        width: 694rpx !important;
                        height: 209rpx !important;
                        overflow: hidden;

                        image {
                            width: 100%;
                        }
                    }
                }

                image {
                    width: 90%;
                }
            }
        }

        .recom-list {
            margin: 30rpx;
            height: 430rpx;
            width: 690rpx;
            /* border-style: solid;
            border-width: 5rpx; */
            border: 2rpx solid;
            border-image: linear-gradient(to bottom, #498aee, #7cd0fe);
            /* border-image: radial-gradient(circle at center, #498aee, #7cd0fe); */
            /* border-image-slice: 10; */
            border-radius: 20rpx;
            box-shadow: inset 0 0 0 2px #a1cbfd, inset 0 0 0 2px #7cd0fe;

            /* border: 10px solid transparent;
              background-clip: padding-box;
              background-image: linear-gradient(to bottom, #3498db, #2ecc71); */
            .fenlei {
                display: flex;
                flex-wrap: wrap;
                /* justify-content: space-between; */
                /* justify-content: flex-start; */
                margin-top: 20rpx;
                overflow: hidden;

                .item {
                    width: 20%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    /*  justify-content: space-between; */
                    align-items: center;
                    margin: 20rpx 0;

                    .pic {
                        width: 100rpx;
                        height: 100rpx;
                        /*  border-radius: 50%; */
                        overflow: hidden;

                        image {
                            width: 80rpx;
                        }
                    }

                    text {
                        font-size: 25rpx;
                        letter-spacing: 2rpx;
                        color: #262626;
                        padding-top: 12rpx;
                        font-weight: 600;
                    }
                }
            }
        }

        .inform {
            // overflow: hidden;
            padding: 0 25rpx;
            height: 130rpx;
            margin-top: 30rpx;
            // margin: 30rpx auto;
            border-bottom: 16rpx solid #f9f9f9;

            .inform-info {
                display: flex;
                padding: 0 20rpx;
                height: 70rpx;
                background-color: #f7f7f7;
                border-radius: 10rpx;

                .picture {
                    width: 20%;
                    height: 100%;

                    image {
                        width: 93rpx;
                        height: 84rpx;
                        margin-top: -20rpx;
                    }
                }

                .info {
                    width: 80%;
                    height: 100%;

                    .swiper {
                        width: 100%;
                        height: 100%;

                        .swiper-item {
                            display: flex;
                            align-items: center;
                            width: 100%;
                            height: 100%;

                            text {
                                font-size: 28rpx;
                                color: #848281;
                            }
                        }
                    }
                }
            }
        }

        .service-tit {
            font-family: YouSheBiaoTiHei;
            margin: 30rpx 30rpx 0 30rpx;
            font-size: 40rpx;
            color: $base;
            font-weight: 600;
            display: flex;
            align-items: center;
            letter-spacing: 2rpx;

            .line {
                margin-right: 20rpx;
                background: $base;
                border-radius: 25rpx;
                height: 38rpx;
                width: 8rpx;
            }
        }

        .goods-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 30rpx 30rpx 20px;

            .list {
                width: 332rpx;
                height: 420rpx;
                margin-bottom: 20rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                overflow: hidden;
                border: solid 1px #bdbdbd;

                .pictrue {
                    display: flex;
                    justify-content: center;
                    width: 100%;

                    image {
                        height: 232rpx;
                    }
                }

                .title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                    font-size: 26rpx;
                    text-align: center;
                    font-weight: 600;
                    padding-top: 20rpx;
                }

                .price-info {
                    padding: 0 6rpx;

                    //   height: 80rpx;
                    .s-middle {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10rpx 0;

                        .tag {
                            text {
                                font-size: 32rpx;
                                color: #999;
                                /* color: $base; */
                            }

                            .p {
                                font-size: 24rpx;
                                padding-left: 10rpx;
                            }
                        }
                    }

                    .user-price {
                        display: flex;
                        align-items: center;

                        text {
                            color: $price-clor;
                        }

                        .min {
                            font-size: 24rpx;
                        }

                        .max {
                            font-size: 32rpx;
                        }
                    }
                }
            }
        }

        .box1 {
            height: 446rpx;
            background: url("https://yl.weilankangyang.com/static/mini_program/index/bg.jpg") no-repeat center center;
            background-size: cover;

            .txt {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 15rpx 0;

                image {
                    width: 31rpx;
                }

                text {
                    font-family: YouSheBiaoTiHei;
                    font-size: 40rpx;
                    letter-spacing: 3rpx;
                    color: #147457;
                    padding: 0 20rpx;
                    font-weight: 600;
                }
            }

            .fenlei {
                display: flex;
                flex-wrap: wrap;
                //   justify-content: space-between;
                /* justify-content: flex-start; */
                margin: 0 auto;
                overflow: hidden;

                .item {
                    width: 20%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    /*  justify-content: space-between; */
                    align-items: center;
                    margin-top: 24rpx;

                    .pic {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                        overflow: hidden;

                        image {
                            width: 100rpx;
                        }
                    }

                    text {
                        font-size: 25rpx;
                        letter-spacing: 2rpx;
                        color: #262626;
                        padding-top: 12rpx;
                        font-weight: 600;
                    }
                }
            }
        }
        
        .u-load-more-wrap {
        		display: flex;
        		justify-content: center;
        		align-items: center;
        	}
         
         .u-load-more-inner {
         	display: flex;
         	justify-content: center;
         	align-items: center;
         	padding: 0 12rpx;
         }
         
        /* @import "../../libs/css/style.components.scss"; */
         
         /* #ifdef MP */
         // 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
         // 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
         u-line {
         	flex: none;
         }
         /* #endif */
    }
</style>